<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@include file="/WEB-INF/jsp/common/head.jsp"%>

<div class="content">
    <div class="container-fluid">
        <nav class="pull-left">
            <strong>你现在所在的位置是:</strong>&nbsp;&nbsp;&nbsp; <span>商品管理页面 >> 商品添加页面</span><br> <br>
        </nav>
    </div>
    <div class="container-fluid">
        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div>
                        <div class="card">
                            <div class="header">
                                <h4 class="title">
                                    添加商品信息 <small> Add Product Infomation</small>
                                </h4>
                            </div>
                            <div class="content">
                                <!-- 错误消息显示区域 -->
                                <c:if test="${not empty message}">
                                    <div class="alert alert-danger" role="alert">
                                            ${message}
                                    </div>
                                </c:if>

                                <form id="productForm" name="productForm" method="post"
                                      action="${pageContext.request.contextPath }/sys/product/add">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label>商品名称 <small> name</small> </label>
                                                <input type="text" class="form-control border-input"
                                                       placeholder="请输入商品名称" name="name" id="name" required>
                                                <div class="error-message text-danger"></div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>商品价格 <small>Price</small></label>
                                                <input type="number" step="0.01" min="0.01"
                                                       placeholder="商品价格" name="price" class="form-control border-input" required>
                                                <div class="error-message text-danger"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>商品库存 <small> Stock</small> </label>
                                                <input type="number" min="0" class="form-control border-input"
                                                       placeholder="商品库存" name="stock" id="stock" required>
                                                <div class="error-message text-danger"></div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label>三级分类 CategoryLevel3</label>
                                        <select class="form-control" name="categoryLevel3Id" required>
                                            <option value="">- 请选择 -</option>
                                            <c:forEach var="category" items="${categoryLevel3List}">
                                                <option value="${category.id}">${category.name}</option>
                                            </c:forEach>
                                        </select>
                                        <div class="error-message text-danger"></div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label>地 址 <small> Address</small> </label>
                                                <input type="text" class="form-control border-input"
                                                       placeholder="商品摆放位置" name="placement" id="placement">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label>商品描述</label>
                                                <textarea rows="5" class="form-control border-input"
                                                          placeholder="商品描述" name="description"
                                                          id="description"></textarea>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="text-center">
                                        <button id="add" type="submit" class="btn btn-info btn-fill btn-wd">新增商品</button>
                                        <button id="back" type="button" class="btn btn-success btn-fill btn-wd" onclick="history.back()">返回</button>
                                    </div>
                                    <div class="clearfix"></div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<%@include file="/WEB-INF/jsp/common/foot.jsp"%>

<script type="text/javascript">
    // 激活侧边栏菜单
    $(".sidebar-wrapper .nav li:eq(1)").addClass("active");

    // 表单验证
    $(document).ready(function() {
        // 表单提交前置校验
        $("#productForm").submit(function(e) {
            let isValid = true;
            $(".error-message").empty();

            // 验证商品名称
            const name = $("#name").val().trim();
            if (name === "") {
                $("#name").next(".error-message").text("商品名称不能为空");
                isValid = false;
            }

            // 验证价格
            const price = $("input[name='price']").val().trim();
            if (price === "") {
                $("input[name='price']").next(".error-message").text("商品价格不能为空");
                isValid = false;
            } else if (parseFloat(price) <= 0) {
                $("input[name='price']").next(".error-message").text("商品价格必须大于0");
                isValid = false;
            }

            // 验证库存
            const stock = $("#stock").val().trim();
            if (stock === "") {
                $("#stock").next(".error-message").text("商品库存不能为空");
                isValid = false;
            } else if (parseInt(stock) < 0) {
                $("#stock").next(".error-message").text("商品库存不能为负数");
                isValid = false;
            }

            // 验证分类
            const categoryId = $("select[name='categoryLevel3Id']").val();
            if (categoryId === "") {
                $("select[name='categoryLevel3Id']").next(".error-message").text("请选择三级分类");
                isValid = false;
            }

            if (!isValid) {
                e.preventDefault();
                return false;
            }

            // 提交前禁用按钮，防止重复提交
            $("#add").attr("disabled", true).text("提交中...");
        });
    });
</script>